<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .nav {
            height: 100px;
            margin: auto;
            display: flex;
            justify-content: flex-start;
            position: relative;
        }

        .logo {
            padding-top: 20px;
            padding-left: 450px;
        }

        .til {
            height: 100px;
            text-align: center;
            line-height: 100px;
            padding: 0 15px;
            margin-left: 10px;
            transition: all .7s ease 0s;

            /* background-color: #174FA4; */
        }

        .nav ul {
            position: relative;

        }

        .til0,
        .til1,
        .til2,
        .til3,
        .til4,
        .til5,
        .til6,
        .til7 {
            background-color: #174FA4;
            position: absolute;
            top: 100px;
            left: 10px;
            width: 150px;
        }

        ol {
            transition: all .7s ease 0s;
        }

        ol li {
            height: 0;
            overflow: hidden;
            transition: all .7s ease 0s;
            color: white;
            line-height: 34px;
           
        }
        a{
            position: relative;
            
        }
        ol li:hover a{
            transition: 1s linear;
            left: 5px;
        }
        ol li:hover{
            background-color: #729ddf;
        }
    </style>
</head>

<body>

    <div class="nav">
    </div>
    <script>
        var data = [
            {
                title: '首页',
                list: []
            },
            {
                title: '概况',
                list: ['科技馆介绍', '馆内资讯', '通知公告', '预算公开']
            },
            {
                title: '楼层展览',
                list: ['展馆一层', '展馆二层', '展馆三层', '临时展览']
            },
            {
                title: '科普活动',
                list: ['科普大篷车', '科普报告会', '馆校结合', '魅力科学课堂', '科普表演剧', '理论广角', '创客训练营', '数学实验室']
            },
            {
                title: '影院影讯',
                list: ['影院介绍', '列播放场', '影片介绍']
            },
            {
                title: '科普志愿者',
                list: ['志愿者管理办法', '志愿者风采', '网上申请']
            },
            {
                title: '咨询服务',
                list: ['开馆时间', '失物招领', '乘车路线', '参观须知', '联系我们']
            },
            {
                title: '报名入口',
                list: ['资源下载', '科学运动会报名', '科普大篷车报名']
            },
        ]
        var str = '';
        var nav = document.querySelector('.nav');
        for (let i = 0; i < data.length; i++) {
            str += `  
            <ul>
            <p class="til">${data[i].title}</p>
            <ol class="til${i}">`
            var num = data[i].list.length;
            var str1 = '';
            for (let j = 0; j < num; j++) {
                str1 += `<li>&emsp;&gt;&emsp;<a>${data[i].list[j]}</a></li>`
            }
            str = str + str1 + '</ol>' + '</ul>';
        }
        console.log(str);
        nav.innerHTML = '<div class="logo"><img src="http://www.zzkjg.com/images/logo.jpg" alt=""></div>' + str;
        var titles = document.querySelectorAll('.til');
        var ols = document.querySelectorAll('ol');
        var qlis = document.querySelectorAll('li');
        for (let i = 0; i < titles.length; i++) {
            titles[i].onmouseover = function () {
                var num2 = ols[i].children.length;
                var lis = ols[i].querySelectorAll('li');
                for (let k = 0; k < qlis.length; k++) {
                    qlis[k].style.height = '0px';
                }
                for (let j = 0; j < num2; j++) {
                    lis[j].style.height = '34px';
                }
                for (let l = 0; l < titles.length; l++) {
                    titles[l].style.backgroundColor = 'white';
                    titles[l].style.color = '#777777';
                    ols[l].style.padding = '0px 0px';
                }
                titles[i].style.backgroundColor = '#174FA4';
                titles[i].style.color = 'white';
                ols[i].style.padding = '15px 0px';
                ols[0].style.padding = '0px 0px'
            }
        }
        console.log(ols[0]);

        for (let i = 0; i < titles.length; i++) {
            titles[i].onmouseleave = function () {
                for (let k = 0; k < qlis.length; k++) {
                    qlis[k].style.height = '0px';
                }
                titles[i].style.color = 'white';
                ols[i].style.padding = '0px 0px';
            }
        }
        for (let i = 0; i < titles.length; i++) {
            ols[i].onmouseover = function () {
                var num2 = ols[i].children.length;
                var lis = ols[i].querySelectorAll('li');
                for (let j = 0; j < num2; j++) {
                    lis[j].style.height = '34px';
                }
                for (let l = 0; l < titles.length; l++) {
                    ols[l].style.padding = '0px 0px';
                }
                ols[i].style.padding = '15px 0px';
                ols[0].style.padding = '0px 0px'
            }
        }
        for (let i = 0; i < titles.length; i++) {
            ols[i].onmouseleave = function () {
                var num2 = ols[i].children.length;
                var lis = ols[i].querySelectorAll('li');
                for (let j = 0; j < num2; j++) {
                    lis[j].style.height = '0';
                }
                ols[i].style.padding = '0px 0px';
            }
        }
    </script>
</body>

</html>